<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>汽车管理系统</title>
  </head>
  <body>
    <div id="app">
      <h2>汽车管理系统</h2>
      <table border="1" width="100%">
        <tr>
          <th>编号</th>
          <th>车名</th>
          <th>价格</th>
          <th>车速</th>
          <th>颜色</th>
          <th>操作</th>
        </tr>
        <tr v-for="(obj,index) in cars">
          <td>{{ obj.id }}</td>
          <td>{{ obj.name }}</td>
          <td>{{ obj.price }}</td>
          <td>{{ obj.speed }}</td>
          <td>{{ obj.color }}</td>
          <td>
            <a href="" @click.stop.prevent="del(obj,index)">删除</a> |
            <a href="" @click.stop.prevent="edit(obj,index)">编辑</a>
          </td>
        </tr>
      </table>
      <fieldset>
        <legend>汽车</legend>
        <p>
          <label> 名称： </label>
          <input type="text" v-model="car.name" />
        </p>
        <p>
          <label> 价格： </label>
          <input type="text" v-model="car.price" />
        </p>
        <p>
          <label> 速度： </label>
          <input type="text" v-model="car.speed" />
        </p>
        <p>
          <label> 颜色： </label>
          <input type="text" v-model="car.color" />
        </p>
        <p>
          <button @click="save" type="button">保存</button>
        </p>
      </fieldset>
    </div>

    <script src="javascripts/vue/vue.js"></script>
    <script src="javascripts/axios/axios.min.js"></script>
    <script>
      let app = new Vue({
        el: "#app",
        data: {
          cars: [],
          car: { id: 0, name: "", price: "", speed: "", color: "" },
        },
        created() {
          axios
            .get("http://127.0.0.1:3000/api/cars")
            .then((data) => {
              this.cars = data.data.data;
            })
            .catch((err) => {
              throw err;
            });
        },
        methods: {
          del(obj, index) {
            if (confirm("您确定要删除吗？")) {
              let url = "http://127.0.0.1:3000/api/cars/" + obj.id;
              axios
                .delete(url)
                .then((data) => {
                  if (data.data.status === "ok") {
                    alert("删除成功");
                    this.cars.splice(index, 1);
                  } else {
                    alert("删除失败");
                  }
                })
                .catch((err) => {
                  throw err;
                });
            }
            return false;
          },
          edit(obj, index) {
            let url = "http://127.0.0.1:3000/api/cars/" + obj.id;
            axios
              .get(url)
              .then((data) => {
                this.car = data.data.data;
              })
              .catch((err) => {
                throw err;
              });
            return false;
          },
          save() {
            //有id为修改
            if (this.car.id) {
              axios
                .put("http://127.0.0.1:3000/api/cars", this.car)
                .then((data) => {
                  if (data.data.status === "ok") {
                    alert("修改成功！");
                    this.car = {
                      id: 0,
                      name: "",
                      price: "",
                      speed: "",
                      color: "",
                    };
                    this.cars = data.data.data;
                  }
                });
            } else {
              //没id为添加
              axios
                .post("http://127.0.0.1:3000/api/cars", this.car)
                .then((data) => {
                  if (data.data.status === "ok") {
                    alert("新增成功！");
                    this.cars.push(data.data.data);
                    this.car.id = 0;
                  }
                })
                .catch((err) => {
                  throw err;
                });
            }
          },
        },
      });
    </script>
  </body>
</html>
